<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="选择方式">
            <el-radio-group v-model="radio" @change="radioChange">
              <el-radio :label="1">部门方式</el-radio>
              <el-radio :label="2">群组方式</el-radio>
            </el-radio-group>

          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="协同部门" prop="deptList" v-if="radio == 1">
            <el-select v-model="form.deptList" multiple placeholder="请选择" style="width: 100%;">
              <el-checkbox v-model="checked" class="all-select" @change="changeCheck">全选</el-checkbox>
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="群组" prop="depType" v-if="radio == 2 ">
            <el-select v-model="form.depType" placeholder="请选择" style="width: 100%;" @change="changeGroup">
              <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="radio == 2 && groupId != '' ">
          <el-form-item label="部门选择" prop="checkList">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="item in sysGroups"  :key="item.dept_id"  :label="item.dept_id"  :checked="true" >{{item.dept_name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="反馈要求" prop="feedback_require">
            <el-input v-model.trim="form.feedback_require" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">{{ loading ? '确定中 ...' : '确 定'
        }}</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { editDept } from "@/api/warningOrder";
import { getAllDept } from "@/api/dept";
import { getGroupList,getOne } from "@/api/group";
export default {
  name: 'bumenEdit',
  data() {
    return {
      checked: false,
      checkList: [],
      radio: 1,
      form: {
        id: '',
        dept_id: '',
        feedback_require: '',
        warning_order_id: '',
        deptName: '',
        deptList: [],
        depType: '',
      },
      deptDatas: [],
      defaultProps: {
        children: 'children',
        name: 'name'
      },
      expandOnClickNode: true,
      rules: {
        deptList: [{ required: true, trigger: 'blur', message: '请选择部门' },],
        feedback_require: [{ required: true, trigger: 'blur', message: '请输入反馈要求' },],
        depType: [{ required: true, trigger: 'blur' ,message: '请选择群组'}],
      },
      title: '',
      dialogFormVisible: false,
      loading: false,
      disabled: false,
      options: [],
      groupList: [],
      sysGroups: [],
      groupId: '',
    }
  },
  created() { },
  methods: {
    clickitem(e) { e === this.radio ? this.radio = '' : this.radio = e },
    showDia(row) {
      this.radio = 1;

      this.getDeptData();
      this.getAllGroup();
      if (row.warning_order_id) {
        this.title = '添加'
        this.form.warning_order_id = row.warning_order_id;
      } else {
        this.title = '编辑'

        this.form = Object.assign({}, row.row)
        this.form.deptName = row.row.dept_name;


      }
      this.dialogFormVisible = true
    },
    handleChange(value) {
      let cityNames = []
      value.forEach((e) => {
        cityNames.push(CodeToText[e])
      })
      this.citys = cityNames.join('/')
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.sysGroups= [];
      this.checkList = [];
      this.groupId = '';
      this.checked = false;


      this.dialogFormVisible = false
    },
    save() {
      if (this.radio == 2){
        this.form.deptList = this.checkList
      }

      if (this.loading) {
        return
      }
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.disabled = true


          editDept(this.form).then((res) => {
            console.log('res', res);
            if (res.code == 0) {
              this.$baseMessage(res.msg, 'success')
              this.$emit('fetch-data')
              this.loading = false
              this.disabled = false
              this.close()
            } else {
              this.loading = false
              this.disabled = false
              this.$baseMessage(res.msg, 'error')

            }
          });
        } else {
          return false
        }
      })
    },

    //获取部门树
    getDeptData() {
      getAllDept().then((res) => {
        var list = res.data;
        this.options = [];
        for (var i = 0; i < list.length; i++) {
          var x = {};
          x.id = list[i].id;
          x.name = list[i].name;
          this.options.push(x);
        }

      })
    },
    getAllGroup(){
      getGroupList().then((res) => {

        this.groupList = res.data;
      })
    },
    changeGroup(val){
      this.groupId = val;
      getOne(val).then((res) => {
        this.sysGroups = res.data.sysGroups
      })
    },
    radioChange(val){
      console.log('val',val);
      if (val == 1) {
        this.form.depType = '';
        this.sysGroups= [];
        this.checkList = [];
        this.groupId = '';
      }
      if (val == 2) {
        this.checked = false;
        this.form.deptList= [];
      }
    },
    changeCheck(){
      if (this.checked == true){
        this.form.deptList = [];
        var list = this.options;
        for (var i = 0; i < list.length; i++) {
          this.form.deptList.push(list[i].id);
        }
      }else {
        this.form.deptList = [];
      }
    }


  },
}
</script>
<style lang="scss" scoped>
.tree-box {
  height: 240px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
}
.all-select{
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 8px;
}
</style>